<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-02-01 10:05:45
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-02-27 15:21:31
 * @FilePath: \ZHGD-Vue2\src\views\bitumenMixingStation\productionQuality\summaryAnalysis.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 生产质量汇总分析 -->
<template>
  <!-- <div class="my-container"> -->
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
        <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
      </el-col>

      <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
        <div class="container-body" ref="clientBox">
          <el-form :inline="true" :model="queryParams" size="small" class="mySearch" style="margin-top: 10px;">
            <el-button style="margin: 3px 15px 0 0;" size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle @click="showLeft(show)"></el-button>
            <el-form-item label="拌合楼">
              <el-select v-model="queryParams.stationCode" clearable size="mini" placeholder="沥青拌合楼">
                <el-option v-for="item in cementListData" :key="item.id" :label="item.name" :value="item.code"></el-option>
              </el-select>
              <!-- <zhjd-select-station v-model="queryParams.stationCode" placeholder="沥青拌和楼" type="asphalt" /> -->
            </el-form-item>
            <el-form-item label="选择时间">
              <el-select filterable v-model="reportType" style="width: 100px; margin-right: 8px" :popper-append-to-body="false">
                <el-option label="投产以来" value="all"></el-option>
                <el-option label="按年" value="year"></el-option>
                <el-option label="自定义" value="other"></el-option>
              </el-select>
              <deatetime v-if="'other' == reportType" ref="deatetime" v-model="queryParams.timeRange"></deatetime>
              <el-date-picker v-if="'year' == reportType" v-model="queryParams.year" value-format="yyyy" format="yyyy" type="year" placeholder="选择年"> </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="dataList" border size="mini" highlight-current-row stripe>
            <el-table-column prop="stationName" label="拌合楼" align="center" width="120px" show-overflow-tooltip fixed="left"></el-table-column>
            <el-table-column prop="matchType" label="级配类型" align="center" min-width="100px" show-overflow-tooltip fixed="left"></el-table-column>
            <el-table-column prop="matchName" label="配方名称" align="center" min-width="100px" show-overflow-tooltip fixed="left"></el-table-column>
            <el-table-column prop="matchCode" label="配方编号" align="center" min-width="130px" show-overflow-tooltip fixed="left"></el-table-column>
            <el-table-column prop="projectName" label="项目名称" align="center" width="220px" show-overflow-tooltip fixed="left"></el-table-column>
            <el-table-column prop="pavingLevelLabel" label="摊铺层级" align="center" width="80px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="number" label="已生产批次" align="center" width="86px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="weight" label="已生产重量(吨)" align="center" width="110px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="asphaltAggregateRatioAvg" label="平均油石比" align="center" width="86px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="asphaltAggregateRatio" label="设计油石比" align="center" width="86px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="temperatureAvg" label="平均温度(℃)" align="center" show-overflow-tooltip width="100px"></el-table-column>
            <el-table-column prop="temperature" label="设计温度(℃)" align="center" width="100px" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.temperature | showEmpty }}</template>
            </el-table-column>
            <el-table-column prop="alarmWeight" label="不合格重量(吨)" align="center" width="110px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="alarmNumber" label="不合格批次" align="center" width="86px" show-overflow-tooltip></el-table-column>
            <el-table-column prop="asphaltAggregateRatioAlarm" label="油石比超标" align="center" width="86px" show-overflow-tooltip>
              <!-- <template slot-scope="scope">
                <div>{{ scope.row.asphaltAggregateRatioAlarm | showNumber('批') }}</div>
                <div>{{ scope.row.asphaltAggregateRatioAlarmRatio | showNumber('%') }}</div>
              </template> -->
            </el-table-column>
            <el-table-column prop="sieveAlarm" label="级配超标" align="center" width="80px">
              <!-- <template slot-scope="scope">
                <div>{{ scope.row.sieveAlarm | showNumber('批') }}</div>
                <div>{{ scope.row.sieveAlarmRatio | showNumber('%') }}</div>
              </template> -->
            </el-table-column>
            <el-table-column prop="temperatureAlarm" label="温度超标" align="center" width="80px">
              <!-- <template slot-scope="scope">
                <div>{{ scope.row.temperatureAlarm | showNumber('批') }}</div>
                <div>{{ scope.row.temperatureAlarmRatio | showNumber('%') }}</div>
              </template> -->
            </el-table-column>
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import workSiteLeft from "@/views/components/workSiteLeft";
import { sysStationList, getLastData, asphaltQualityStatistics } from "@/api/bitumenMixingStation/productionQuality/summaryAnalysis";


export default {
    name: 'summaryAnalysis',
    components: { workSiteLeft },
    data() {
        return {
            show: true,
            rowObj: {
                T1: 3,
                T2: 24,
                T3: 21,
                T4: 24,
                F1: 0,
                F2: 0,
                F3: 24,
                F4: 24,
            },
            total: 0,
            loading: false,
            dataList: [],
            cementListData: [],
            queryParams: {},
            reportType: 'all',
            matchCodeList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                stationCode: undefined,
                year: undefined,
                timeRange: [undefined, undefined]
            },
        };
    },
    filters: {
        showNumber(value, unit) {
            if (null == value || undefined == value) {
                return '';
            }
            return value + ' ' + unit;
        },
        showEmpty(value) {
            if (null == value || undefined == value) {
                return '/';
            }
            return value;
        }
    },
    mounted() {
        setTimeout(() => {
            this.init();
        }, 500);
    },
    methods: {
        showLeft(show) {
            this.show = !show;
        },
        queryVal(val) {
            this.queryParams.id = val.id;
            this.handleQuery();
        },
        // 查询拌合楼下拉列表
        getCementList() {
            sysStationList({
                type: 'asphalt'
            }).then((res) => {
                this.cementListData = res.data || [];
            });
        },
        init() {
            // 查询数据
            this.onSearch(true);
        },
        /* 执行查询 */
        async onSearch() {
            await getLastData(this.queryParams).then((res) => {
                if (!!res.data) {
                    let dischargeTime = res.data.dischargeTime;
                    if (4 < dischargeTime.length) {
                        this.queryParams.year = dischargeTime.substring(0, 4);
                        this.reportType = 'year';
                    }
                    this.queryParams.stationCode = res.data.stationCode;
                    this.getList()
                }
            });
        },
        getList() {
            this.loading = true;
            asphaltQualityStatistics(this.queryParams).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleQuery() {
            this.queryParams = this.getSearchParams();
            this.queryParams.pageNum = 1;
            this.getList();
        },
        getSearchParams() {
            const params = {};
            for (const key in this.queryParams) {
                if (key === "time") {
                    const time = this.queryParams[key];
                    if (time && time.length === 2) {
                        params.startTime = time[0];
                        params.endTime = time[1];
                    }
                } else {
                    params[key] = this.queryParams[key];
                }
            }
            return params;
        },
    }
};
</script>

<style scoped></style>